<template>
  <div>
    <!-- 自定义搜索组件 需引入 ../../components/SearchBar.vue -->
    <search-bar @onSearch="onSearch"/>
    <!-- 新增商品分类 按钮 点击事件弹出 新增弹窗 -->
    <el-button @click="showModalAdd" type="primary" style="background:darkgreen;margin:15px 0">新增商品分类</el-button>
    <!-- 表格数据渲染组件 -->
    <el-table row-key="id" :data="cates" style="width: 100%">
      <el-table-column prop="cateName" label="商品名" label-width="auto" />
      <el-table-column prop="cateIcon" label="商品展示图" label-width="auto">
        <template #default="{ row }">
          <div>
            <img :src="row.cateIcon" label-width="50" alt="">
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="onsale" label="在售/下架">
        <template #default="{ row }">
          <div>
            <el-switch v-model="row.onsale" inline-prompt active-text="在售" @change="switchonsale(row.id, row.onsale)"
              inactive-text="下架" />
          </div>
        </template>
      </el-table-column>
      <!-- sortable是否有排序 -->
      <el-table-column prop="createAt" label="创建时间" sortable />
      <el-table-column prop="desc" label="商品描述" label-width="auto" />
      <el-table-column label="操作">
        <!-- <template #default="{ row }"> -->
        <template #default="{ row }">
        <!-- 编辑商品分类 按钮 点击事件弹出 编辑弹窗 -->
          <el-button @click="showModalUpdate(row.id)" type="primary">编辑</el-button>
        <!-- 点击事件 删除分类 -->
          <el-button @click="deleteCate(row.id)" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增   商品分类弹窗 -->
    <el-dialog
        v-model="addModalShow"
        title="新增商品分类"
        width="40%"
    >
      <!-- ./components/CateAdd.vue 组件出口，需import引入 -->
      <cate-add :cates="cates"></cate-add>
    </el-dialog>
      <!-- 编辑弹窗 -->
      <el-dialog
          v-model="updateModalShow"
          title="编辑修改分类商品"
          width="40%"
      >
      <!-- ./components/CateUpdate.vue 组件出口，需import引入 -->
        <cate-update :cates="cates" :id="cateId"></cate-update>
      </el-dialog>

  </div>
</template>

<script>

import { fetchCates, updateCate, deleteCate } from '../../api/cateLists'
import SearchBar from '../../components/SearchBar.vue'
import CateAdd from './components/CateAdd.vue'
import CateUpdate from './components/CateUpdate.vue'

export default {
  name: 'CateLists',
  data () {
    return {
      cateId: -1, // 修改商品id
      cates: [],
      searchParams: {
        key: '',
        start: '',
        end: ''
      },
      // 新增、编辑、删除 弹窗是否显示
      addModalShow: false,
      updateModalShow: false
    }
  },
  methods: {
    // 点击搜索按钮搜索数据
    onSearch (searchParams) {
      this.searchParams = searchParams
      this.fetchCates()
      this.$message({
        type: 'success',
        message: '搜索成功'
      })
    },
    switchonsale (id, onsale) {
      // 行内修改商品分类选中状态  发请求修改
      console.log(id, onsale)
      updateCate({
        id,
        onsale
      }).then(res => {
        if (res.data.code === 200) {
          this.$message({
            type: 'success',
            message: res.data.msg
          })
          this.fetchCates()
        }
      })
    },
    // 判断获取的业务数据是否正确
    fetchCates () {
      fetchCates({ ...this.searchParams }).then(res => {
        if (res.data.code === 200) {
          this.cates = res.data.data
        }
      })
    },
    // 新增、编辑 弹窗是否显示
    // 点击弹出 新增弹窗
    showModalAdd () {
      this.addModalShow = true
    },
    // 点击 编辑修改弹窗
    showModalUpdate (id) {
      this.updateModalShow = true
      this.cateId = id
    },
    // 删除 分类数据 需要引入id
    deleteCate (id) {
      this.$confirm('会删除商品分类，继续吗？', '删除').then(() => {
        deleteCate(id).then(res => {
          if (res.data.code === 200) {
            this.$message({
              type: 'success',
              message: res.data.msg
            })
            // 删除成功刷新渲染列表页面
            this.fetchCates()
          }
        })
      })
    }
  },
  // 发出请求、获取数据
  created () {
    this.fetchCates()
  },
  // 子组件使用
  components: {
    SearchBar,
    CateAdd,
    CateUpdate
  }
}
</script>

<style lang="scss" scoped>

</style>
